import {
  getUserProfile,
  updateUserPhoto,
  updateUserProfile,
} from '@/store/actions/user';
// import { RootState } from '@/types/store';
import {
  Button,
  List,
  DatePicker,
  NavBar,
  Popup,
  Toast,
  Dialog,
} from 'antd-mobile';
import classNames from 'classnames';
import dayjs from 'dayjs';
import { useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';

import { EditInput } from './EditInput/EditInput';

import { useInitialState } from '@/utils/use-initial-state';

import styles from './ProfileEdit.module.scss';
import { EditList } from './EditList/EditList';
import { logout } from '@/store/actions/login';

export const ProfileEdit = () => {
  // hooks
  const history = useHistory();
  const dispatch = useDispatch();

  // // 获取用描述信息
  // const profile = useSelector((state: RootState) => state.user.profile);
  // // 页面首次渲染后发起请求
  // useEffect(() => {
  //   dispatch(getUserProfile());
  // }, [dispatch]);

  // 定义原生DOM容器
  const fileRef = useRef<HTMLInputElement>(null);
  // 使用自定义 hooks 获取状态
  const profile = useInitialState(getUserProfile, 'user').profile;
  // 弹窗显示状态
  // const [inputVisible, setInputVisible] = useState(false);
  const [popupState, setPopupState] = useState({
    prop: '', // name, intro, ....
    value: '', // name: ??, intro: ??
    visible: false,
  });
  // 日期选择框可见状态
  const [birthday, setBirthday] = useState(false);

  // 父组件定义一个函数，传递给子组件，准备介绍子组件的数据
  const onValueSubmit = async (value: string, prop: string) => {
    console.log('子组件修改完毕后的prop', prop);
    console.log('子组件修改完毕后的value', value);

    if (prop === 'photo') {
      console.log('特殊处理');
      // 模拟用户点击文件选择按钮
      fileRef.current?.click();
    } else {
      // 更新数据
      await dispatch(updateUserProfile({ [prop]: value }));

      // 提示用户
      if (prop === 'name') {
        Toast.show('昵称更新成功');
      } else if (prop === 'intro') {
        Toast.show('简介更新成功');
      } else if (prop === 'gender') {
        Toast.show('性别更新成功');
      }

      // 关闭弹出层
      setPopupState({
        prop,
        value,
        visible: false,
      });
    }
  };
  // 文件选择事件监听
  const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log('图片选择');
    // console.log(e);
    // 非空判断
    if (!e.target.files) return;
    // 组装成服务器需要的 FormData 类型。
    const formData = new FormData();
    formData.append('photo', e.target.files[0]);
    // console.log('formData', formData);

    // 更新用户头像
    dispatch(updateUserPhoto(formData));

    // 提示
    Toast.show('用户头像更新成功');

    // 关闭头像选择弹框
    setPopupState({
      prop: 'photo',
      value: 'success',
      visible: false,
    });
  };
  // 日期选择事件处理
  const handleBirthday = async (date: Date) => {
    // console.log(date);
    // 把这个data更新到服务器
    // 1、分析接口要的这个日期数据格式，YYYY-MM-DD
    const birthday = dayjs(date).format('YYYY-MM-DD');
    // console.log(birthday);
    // 2、提交给服务器,复用本函数组件内的方法
    await onValueSubmit(birthday, 'birthday');

    // 成功提示
    Toast.show('生日更新成功');
    // 日期选择框隐藏
    setBirthday(false);
  };
  // 退出登录
  const handleLogout = () => {
    // 弹框了
    Dialog.show({
      title: '温馨提示',
      content: '亲，确定要退出登录码？',
      closeOnMaskClick: true, // 点击遮罩层消失
      closeOnAction: true,
      actions: [
        [
          { key: 'cancel', text: '取消', style: { color: '#999' } },
          {
            key: 'ok',
            text: '确定',
            onClick: () => {
              // console.log('点击确定后的操作');
              dispatch(logout());
              history.replace('/login');
            },
          },
        ],
      ],
    });
  };

  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        {/* <NavBar onBack={history.goBack}>个人信息</NavBar> */}
        {/* 如果函数返回一个函数，返回的这个函数写的是调用，它会延迟调用，延迟到你赋值函数调用的时候它才会调用 */}
        <NavBar onBack={() => history.go(-1)}>个人信息</NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <List.Item
              extra={
                <span className="avatar-wrapper">
                  <img
                    width={24}
                    height={24}
                    src={
                      profile.photo ||
                      'http://toutiao.itheima.net/images/user_head.jpg'
                    }
                    alt={'头像'}
                  />
                </span>
              }
              arrow
              onClick={() =>
                setPopupState({
                  prop: 'photo',
                  value: profile.photo,
                  visible: true,
                })
              }
            >
              头像
            </List.Item>
            <List.Item
              arrow
              extra={profile.name}
              onClick={() =>
                setPopupState({
                  prop: 'name',
                  value: profile.name,
                  visible: true,
                })
              }
            >
              昵称
            </List.Item>
            <List.Item
              arrow
              extra={
                <span className={classNames('intro', 'normal')}>
                  {profile.intro || '未填写'}
                </span>
              }
              onClick={() =>
                setPopupState({
                  prop: 'intro',
                  value: profile.intro,
                  visible: true,
                })
              }
            >
              简介
            </List.Item>
          </List>

          <List className="profile-list">
            <List.Item
              arrow
              extra={profile.gender + '' === '0' ? '男' : '女'}
              onClick={() =>
                setPopupState({
                  prop: 'gender',
                  value: profile.gender + '',
                  visible: true,
                })
              }
            >
              性别
            </List.Item>
            <List.Item
              arrow
              extra={profile.birthday}
              onClick={() => setBirthday(true)}
            >
              生日
            </List.Item>
          </List>

          <DatePicker
            visible={birthday}
            onCancel={() => setBirthday(false)} // 响应取消按钮和遮罩层的点击
            value={new Date(profile.birthday)} // 设置日期显示为用户生日
            onConfirm={handleBirthday}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className="logout">
          <Button className="btn" onClick={handleLogout}>
            退出登录
          </Button>
        </div>
      </div>

      {/* 昵称和简介弹窗框 */}
      <Popup
        visible={
          (popupState.prop === 'name' && popupState.visible) ||
          (popupState.prop === 'intro' && popupState.visible)
        }
        position={'right'}
        destroyOnClose
      >
        {/* 父给子传递一个属性，他是一个函数 */}
        <EditInput
          // name => intro => name => intro
          // key={popupState.prop}
          value={popupState.value}
          prop={popupState.prop}
          onClose={(value, prop) =>
            setPopupState({ value: value, prop: prop, visible: false })
          }
          onValueSubmit={onValueSubmit}
        ></EditInput>
      </Popup>
      {/* 性别和头像 */}
      <Popup
        visible={
          (popupState.prop === 'gender' && popupState.visible) ||
          (popupState.prop === 'photo' && popupState.visible)
        }
        onMaskClick={() =>
          setPopupState({
            prop: popupState.prop,
            value: 'cancel',
            visible: false,
          })
        }
        position={'bottom'}
      >
        <EditList
          value={popupState.value}
          prop={popupState.prop}
          onClose={(value, prop) =>
            setPopupState({ value: value, prop: prop, visible: false })
          }
          onValueSubmit={onValueSubmit}
        />
      </Popup>
      {/* 头像选择 form */}
      <input type={'file'} hidden ref={fileRef} onChange={handlePhotoChange} />
    </div>
  );
};
